<template>
	<view>
		<uni-section>
			<uni-card :cover="cover" @click="onClick">
				<image slot='cover' style="width: 100%;" :src="data.images[0].url"></image>
				<text class="uni-body">这是一个带封 面和操作栏的卡片示例，此示例展示了封面插槽和操作栏插槽的用法。</text>
				<view slot="actions">
					<view class="a">
						<view class="card-actions-item" @click="actionsClick('分享')">
							<uni-icons type="redo" size="18" color="#999"></uni-icons>
							<text class="card-actions-item-text">分享</text>
						</view>
						<view class="card-actions-item" @click="actionsClick('点赞')">
							<uni-icons v-if="heart" type="heart" size="18" color="#999"></uni-icons>
							<uni-icons v-else type="heart-filled" size="18" color="#f00"></uni-icons>
							<text class="card-actions-item-text">点赞</text>
						</view>
						<!-- <view class="card-actions-item" @click="actionsClick('评论')">
							<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
							<text class="card-actions-item-text">评论</text>
						</view> -->
					</view>
					<!-- 评论列表 -->
					<view v-if="component" v-for="n in 5">
						<uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息"></uni-list-chat>
					</view>

				</view>
			</uni-card>

		</uni-section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: '',

				component:'asdf',
				
				heart: true,
				cover: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',


				// 评论列表图片
				avatarList: [{
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
				}],

			}
		},
		methods: {
			onClick(e) {
				console.log(e)
			},
			actionsClick(text) {
				if (text == '点赞') {
					this.heart = !this.heart

					uni.request({
						url: '/api-clock/like/insert',

						method: 'POST',
						header: {
							'Content-Type': 'application/json',
							'Authorization' : 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwaG9uZSI6IjEzMzQ0NTU2Njc3IiwiaWRlbnRpdHkiOiIxIiwidG9rZW5UaW1lIjoiRnJpIFNlcCAxNiAyMjozMToxMSBDU1QgMjAyMiIsInRva2VuVHlwZSI6ImFjY2Vzc1Rva2VuIiwidXNlcklkIjoiMiJ9.5BcSHgSdV9EXj32nNzaDKYxsHk09FvndUgqhAlOxufQ'
						},
						data:{
							userId:1,
							type:1,
							typeId:2224,
							status:1
						},
						success: (res) => {
							console.log('like/insert',res)
						},
						fail: (err) => {
							console.log(err)
						}
					})

				}
				if (text == '分享') {
					uni.share({
						provider: 'weixin',
						scene: "WXSceneSession",
						type: 5,
						imageUrl: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/962fc340-4f2c-11eb-bdc1-8bd33eb6adaa.png',
						title: '欢迎体验uniapp',
						miniProgram: {
							id: 'gh_abcdefg',
							path: 'pages/index/index',
							type: 0,
							webUrl: 'http://uniapp.dcloud.io'
						},
						success: ret => {
							console.log(JSON.stringify(ret));
						}
					});
				}

			}
		},
		onLoad(option) {
			console.log('indexdetail 加载完成')
			console.log(option.u)
			uni.request({
				url: '/api-clock/clock/clock/1',
				//	url:'http://e47e76d.r3.vip.cpolar.cn/like/insert',
				// method:'POST',
				// header:{
				// 	'content-type':'application/json'
				// },
				// data:{
				// 	userId:'22',
				// 	type:'1',
				// 	typeId:'2',
				// 	 status:'1'
				// },
				success: (res) => {
					this.data = res.data.data
					console.log('indexDetail: ',this.data)
				},
				fail: (err) => {
					console.log(err)
				}
			})
		}
	}
</script>

<style>
	.a {
		display: flex;
		justify-content: space-around
	}
</style>
